import React, { ReactElement, useRef, useContext } from 'react';
import { View, Text, TextInput } from 'react-native';
import Button from '../../../../components/Button';
import { PLACE_HOLDER_GREY } from '../../../../constant/color';
import {
  setPhoneNumber,
  setPassword,
  clickVerifyLogin,
  loginWithPassword
} from '../../actions';
import { Store } from '../../reducer';

import styles from './style';

export default (): ReactElement => {
  const input = useRef<TextInput>(null);
  const passwordInput = useRef<TextInput>(null);

  const { state } = useContext(Store);
  const { phoneNumber, password, isShowPassword } = state;

  const canLogin = phoneNumber.length === 11 && password.length >= 6;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        若您还未设置密码，请使用验证码登录后在个人中心进行密码设置
      </Text>
      <View style={styles.loadInputs}>
        <TextInput
          ref={input}
          allowFontScaling={false}
          placeholderTextColor={PLACE_HOLDER_GREY}
          value={phoneNumber}
          style={styles.inputPhone}
          onChangeText={setPhoneNumber}
          placeholder="请输入手机号"
          maxLength={11}
          keyboardType="number-pad"
          autoCapitalize="none"
          onBlur={(): void => {}}
        />
        <TextInput
          ref={passwordInput}
          allowFontScaling={false}
          placeholderTextColor={PLACE_HOLDER_GREY}
          value={password}
          style={styles.inputPassword}
          onChangeText={setPassword}
          placeholder="请输入密码"
          maxLength={8}
          secureTextEntry={!isShowPassword}
          keyboardType="default"
          autoCapitalize="none"
          onBlur={(): void => {}}
        />
        <Button
          activity={canLogin}
          text="登录"
          textStyle={styles.loginDesc}
          style={[styles.login, canLogin ? styles.loginValid : {}]}
          onPress={(): void => {
            loginWithPassword();
          }}
        />
      </View>
      <Button
        text="使用验证码登录"
        textStyle={styles.changeLoginTypeDesc}
        style={styles.changeLoginType}
        onPress={clickVerifyLogin}
      />
    </View>
  );
};
